<template>
    <div class="overview-layout">
        <div class="title-box">
            <div class="title">
                <p>数据概览</p>
                <el-tooltip effect="dark" placement="bottom-start">
                    <template #content>
                        <p v-for="item in survey" :key="item">{{ item?.label }}：{{ item?.tip }}</p>
                    </template>
                    <el-icon class="box-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>
        <div class="data-box">
            <div v-for="(item, index) in survey" :key="index" class="data-item">
                <div class="data-title">
                    <span>{{ item?.label }}</span>
                </div>
                <p class="num">{{ numFormat(peopleNum[item?.num]) }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { numFormat } from '@/utils/utils';

const props = defineProps(['overviewData']);

const peopleNum = ref<any>({});

// 概览数据
const survey = ref<unknown>([
    {
        label: '浏览人数',
        tip: '进入该活动页面的用户数量',
        num: 'browser_num'
    },
    {
        label: '参与人数',
        tip: '生成过该活动助力海报的用户数量，不管是否有被助力过',
        num: 'part_num'
    },
    {
        label: '完成人数',
        tip: '参与该活动且完成任务的人数（完成一级任务计入，若助力回退后不满足一级任务条件人数会扣减）',
        num: 'finish_num'
    },
    {
        label: '裂变人数',
        tip: '助力人数+失效人数',
        num: 'fission_num'
    },
    {
        label: '失效人数',
        tip: '开启助力失效后，退出群聊的用户数量（退出全部活动群聊后失效，若再次加入群聊将助力有效）',
        num: 'invalid_num'
    },
    {
        label: '助力人数',
        tip: '作为助力者成功助力的用户数量（不包括助力失效的用户数）',
        num: 'help_num'
    },
    {
        label: '进群人数',
        tip: '通过该活动进入群聊的用户数量（若进入多个群，则进行去重）',
        num: 'enter_group_num'
    },
    {
        label: '退群人数',
        tip: '通过该活动入群又退群的用户数量（若进入多个群，则退出全部活动群聊才计入）',
        num: 'withdraw_num'
    },
    {
        label: '净增留存人数',
        tip: '进群人数-退群人数',
        num: 'retain_num'
    },
    {
        label: '新增好友数',
        tip: '通过该活动添加了引流成员的用户数量（包含被删除好友）',
        num: 'add_friend_num'
    },
    {
        label: '删除好友数',
        tip: '通过该活动添加了引流成员，但在活动期间删除好友关系的用户数量',
        num: 'del_friend_num'
    },
    {
        label: '净增好友数',
        tip: '通过该活动添加了引流成员的用户数量（不包含被删除好友）',
        num: 'increase_friend_num'
    }
]);
watch(
    () => props.overviewData,
    (val: any) => {
        peopleNum.value = val;
    }
);
</script>

<style lang="scss" scoped>
.overview-layout {
    background: #fff;
    box-shadow: 0 4px 4px 0 rgb(240 240 240 / 50%);
    border: 1px solid #eaeaea;
    border-radius: 1px;
    box-sizing: border-box;
    font-family: PingFangSC-Medium, 'PingFang SC';

    .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 24px;
        border-bottom: 1px solid #eaeaea;

        .title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: #33302d;

            :deep(.box-icon) {
                text-align: center;
                font-size: 16px;
                margin-left: 4px;
                color: #969696;
                background: #fff;
                border-radius: 50%;
            }
        }
    }

    .data-box {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        grid-row-gap: 32px;
        align-items: center;
        padding: 17px 24px;

        .data-item {
            .data-title {
                display: flex;
                align-items: center;
                font-size: 14px;

                span {
                    line-height: 20px;
                    font-weight: 400;
                    color: #666;
                }
            }

            .num {
                font-size: 24px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                line-height: 24px;
                color: #33302d;
                margin-top: 8px;
            }
        }
    }
}
</style>
